<template>
    <div class="my">
        <div class="userinfo" @click="handleLogout">
            <div class="img-box">
                <img :src="userinfo.avatar" alt="">
            </div>
            <div class="username">{{ userinfo.name }}</div>
        </div>
        <div class="sheets">
            <div class="sheets-box">
                <div class="sheets-item" @click="handleTo('/pages/pay/index')">
                    <p>我的账户</p>
                    <span class="arrow">
                        <svg t="1651564612822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="16" height="16"><path d="M384 768 640 512 384 256Z" p-id="2059" fill="#bfbfbf"></path></svg>
                    </span>
                </div>
                <div class="sheets-item" @click="handleTo('/pages/tabBar/my/resetPassword')">
                    <p>修改密码</p>
                    <span class="arrow">
                        <svg t="1651564612822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="16" height="16"><path d="M384 768 640 512 384 256Z" p-id="2059" fill="#bfbfbf"></path></svg>
                    </span>
                </div>
                <div class="sheets-item" @click="handleTo('/pages/tabBar/my/code')">
                    <p>我的二维码</p>
                    <span class="arrow">
                        <svg t="1651564612822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="16" height="16"><path d="M384 768 640 512 384 256Z" p-id="2059" fill="#bfbfbf"></path></svg>
                    </span>
                </div>
                <div class="sheets-item"  @click="handleOpenServiceDialog">
                    <p>联系客服</p>
                    <span class="arrow">
                        <svg t="1651564612822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="16" height="16"><path d="M384 768 640 512 384 256Z" p-id="2059" fill="#bfbfbf"></path></svg>
                    </span>
                </div>
            </div>
        </div>
        <van-dialog id="van-dialog" confirm-button-color="#5581FA"/>
    </div>
</template>

<script>
import {getServiceConf, userRequest} from "@/api";
import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';

export default {
    name: "tarbarMyIndex",
    data() {
        return {
            userinfo: {
                avatar: '',
                name: ''
            },
            serviceConf: {}
        }
    },
    onLoad() {
        userRequest.getUserInfo().then(res => {
            this.userinfo = res.data
            uni.setStorageSync('userinfo', this.userinfo)
        })
    },
    methods: {
        handleTo(url) {
            uni.navigateTo({
                url
            })
        },
        handleLogout() {
            Dialog.confirm({
                title: '退出登陆',
                message: '是否确认退出？',
            })
                .then(() => {
                    uni.removeStorageSync('token')
                    uni.redirectTo({
                        url: '/pages/tabBar/my/login'
                    })
                })
                .catch(() => {
                    // on cancel
                });
    
        },
        // 打开客服对话框
        async handleOpenServiceDialog() {
            // on close
            if (!this.serviceConf.mobile) {
                const res = await getServiceConf()
                this.serviceConf = res.data
            }
            await Dialog.alert({
                message: `客服联系方式：${this.serviceConf.mobile}`,
            })
        },
    }
}
</script>

<style lang="less">
.my {
    height: 100vh;
    background-color: #FBFBFB;
    .userinfo {
        width: 100%;
        height: 116px;
        background: #5581FA;
        padding: 30px;
        display: flex;
        align-items: center;
        .img-box {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .username {
            width: 125px;
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 22px;
        }
    }
    .sheets {
        padding: 16px;
        .sheets-box {
            border-radius: 4px;
            background-color: #FFFFFF;
            padding: 4px;
        }
        .sheets-item {
            position: relative;
            border-bottom: 1px solid #E4E4E4;
            display: flex;
            align-items: center;
            height: 46px;
            img {
                width: 18px;
                height: 18px;
                margin-right: 12px;
                margin-left: 4px
            }
            p {
                height: 18px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #1F222D;
                line-height: 18px;
            }
            .arrow {
                position: absolute;
                top: 0;
                right: 17px;
            }
        }
        .sheets-item:last-child {
            border-bottom: none;
        }
    }
    
}
</style>